<template>
  <div class="min-h-200 flex-col items-center gap-y-20">
    <MyToggle v-model="active" :options="tabs" />
    <div v-show="active === 'demand'">
      <MyTable
        ref="$table"
        v-model:query-items="queryItems"
        :columns="columns"
        :get-data="(params) => projectApi.rangeDemandList({ ...params, projectId: detail.id })"
        :index="true"
        :auto-load="false"
        list-key="demand_pool_list"
      >
        <template #search>
          <MyTQI>
            <n-input
              v-model:value="queryItems.searchVal"
              type="text"
              placeholder="请输入需求描述、提出人"
              clearable
            >
              <template #suffix>
                <n-icon size="20" :component="Search"></n-icon>
              </template>
            </n-input>
          </MyTQI>

          <MyTQI>
            <AsyncSelect
              v-model:value="queryItems.priority"
              placeholder="优先级"
              options="PRIORITY"
              @load-dict="(dict) => (data.priorityOptions = dict)"
            />
          </MyTQI>
          <MyTQI>
            <AsyncSelect
              v-model:value="queryItems.implementationStage"
              placeholder="实现状态"
              options="IMPLEMENTATION_STAGE"
              @load-dict="(dict) => (data.achieveOptions = dict)"
            />
          </MyTQI>
        </template>
        <template #action>
          <n-button v-permission="`demand_pool_add`" type="primary" @click="handleAdd">
            添加
          </n-button>
        </template>
      </MyTable>
      <MyDrawer ref="$form" :model-form="model" @submit="handleSubmit">
        <n-form-item
          label="需求描述"
          path="description"
          :rule="{ required: true, message: '请输入需求描述' }"
        >
          <n-input
            v-model:value="model.description"
            clearable
            :maxlength="300"
            show-count
            type="textarea"
            :autosize="{
              minRows: 3,
            }"
          />
        </n-form-item>
        <n-form-item label="附件" path="refFileDtoList">
          <FileUpload v-model="model.refFileDtoList" color="#FFF" />
        </n-form-item>
        <n-form-item
          label="提出人"
          path="proposer"
          :rule="[{ required: true, message: '请输入提出人！' }]"
        >
          <n-input v-model:value="model.proposer" clearable :maxlength="50" />
        </n-form-item>
        <n-form-item label="优先级" path="priority">
          <AsyncSelect v-model:value="model.priority" options="PRIORITY" />
        </n-form-item>
        <n-form-item label="实现状态" path="implementationStage">
          <AsyncSelect v-model:value="model.implementationStage" options="IMPLEMENTATION_STAGE" />
        </n-form-item>
      </MyDrawer>
    </div>
    <Record
      v-if="active === 'output'"
      :id="detail.id"
      :apis="outputApis"
      :permission-keys="{
        list: 'output_list',
        add: 'output_sub',
        edit: 'output_update',
        del: 'output_delete',
      }"
    />
  </div>
</template>
<script setup lang="jsx">
import { useAuthTabs } from '@/hooks/useAuthTabs'
import * as projectApi from '@/api/project'
import { useCrudPro } from '@/hooks/useCrudPro'
import { Search } from '@vicons/ionicons5'

defineOptions({ name: 'RangeManage' })
const props = defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
})
const outputApis = {
  add: projectApi.rangeOutputAdd,
  list: projectApi.rangeOutputList,
}
const { tabs, active } = useAuthTabs([
  { label: '需求池', value: 'demand', key: 'demand_pool' },
  { label: '输出物', value: 'output', key: 'output' },
])
const data = reactive({
  priorityOptions: [],
  achieveOptions: [],
})

const queryItems = ref({})
const columns = [
  { key: 'description', title: '需求描述' },
  {
    key: 'refFileDtoList',
    title: '附件',
    width: 320,
    render: ({ refFileDtoList }) => <FileList model-value={refFileDtoList} show-remove={false} />,
  },
  {
    key: 'priorityName',
    title: '优先级',
    render: ({ priority }) => (
      <MyStatus type="card" options={data.priorityOptions} value={priority} />
    ),
  },
  {
    key: 'implementationStageName',
    title: '实现状态',
    render: ({ implementationStage }) => (
      <MyStatus options={data.achieveOptions} value={implementationStage} />
    ),
  },
  { key: 'proposer', title: '提出人' },
  { key: 'createTime', title: '添加时间', render: ({ createTime }) => $format(createTime) },
  {
    title: '操作',
    key: 'actions',
    width: 220,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <n-button v-permission="demand_pool_update" text onClick={() => handleEdit(row)}>
            修改
          </n-button>
          <n-button
            v-permission="demand_pool_delete"
            text
            onClick={() =>
              handleDelete(row, {
                title: '删除需求池',
                content: `请确定是否删除需求池`,
              })
            }
          >
            删除
          </n-button>
        </n-flex>
      )
    },
  },
]
const { model, $table, $form, handleAdd, handleEdit, handleDelete, handleSubmit } = useCrudPro({
  name: '需求池',
  initForm: {
    id: null,
    description: null,
    refFileDtoList: [],
    proposer: null,
    priority: null,
    implementationStage: null,
  },
  apis: {
    add: (params) => projectApi.rangeDemandAdd({ ...params, projectId: props.detail.id }),
    edit: projectApi.rangeDemandEdit,
    del: ({ id }) => projectApi.rangeDemandDel({ id }),
    info: ({ id }) =>
      projectApi.rangeDemandInfo({ id }).then((res) => {
        return res.data
      }),
  },
})

watch(
  () => props.detail.id,
  (val) => {
    if (val) {
      nextTick(() => {
        $table.value.handleQuery()
      })
    }
  },
  {
    immediate: true,
  }
)
</script>
<style lang="scss" scoped></style>
